<template>
  <div>
    <div class="flex flex-col h-full">
      <SearchContainer @search="queryList" @reset="() => formRef.resetFields()">
        <a-form ref="formRef" class="form-style-flex" :model="formState" :label-col="{ style: { width: '70px' } }">
          <a-form-item name="ysbh" label="医生" class="w-72">
            <SelectDoctor v-model:value="formState.ysbh" :search-type="true" @success="receptionData" @change="onChangeEmp" />
          </a-form-item>
          <a-form-item name="" label="" class="ml-4 mr-4 text-center">
            <a-button type="primary" @click="formState.rq = dayjs(formState.rq).subtract(1, 'day').format('YYYY-MM-DD')">上一天 </a-button>
          </a-form-item>
          <a-form-item name="rq" label="" class="w-72 text-center">
            <a-date-picker v-model:value="formState.rq" :disabled-date="disabledDate" class="w-full" placeholder="日期" value-format="YYYY-MM-DD" />
          </a-form-item>
          <a-form-item name="" label="" class="ml-4 text-center">
            <a-button type="primary" @click="formState.rq = dayjs(formState.rq).add(1, 'day').format('YYYY-MM-DD')">下一天 </a-button>
          </a-form-item>
        </a-form>
      </SearchContainer>
      <a-card class="mt-2 flex-1">
        <a-space class="mb-3 flex justify-end">
          <a-button type="primary" @click="onSave()">保存</a-button>
        </a-space>

        <div class="scheduling border-2">
          <div class="flex border-b-2 overflow-y-scroll">
            <div class="w-72 border-r-2">&nbsp;</div>
            <div class="flex-1 p-2 border-r-2 text-center">{{ titleDate }}</div>
          </div>
          <div class="flex border-b-2 overflow-y-scroll">
            <div class="w-72 p-2 border-r-2">
              <div class="">医生</div>
            </div>
            <!-- 是否启用夜班: ENABLE_NIGHT_OUTPATIENT-->
            <div class="flex-1 p-2 flex border-r-2">
              <div :class="getSystemConfig('ENABLE_NIGHT_OUTPATIENT') === '1' ? 'w-1/3' : 'w-1/2'" class="border-r-2 text-center">上午</div>
              <div :class="getSystemConfig('ENABLE_NIGHT_OUTPATIENT') === '1' ? 'w-1/3 border-r-2' : 'w-1/2'" class="text-center">下午</div>
              <div v-if="getSystemConfig('ENABLE_NIGHT_OUTPATIENT') === '1'" class="w-1/3 text-center">夜晚</div>
            </div>
          </div>
          <a-spin :spinning="loading">
            <div class="detail">
              <template v-if="empList.length > 0">
                <div v-for="record in empList" :key="record.empId" class="flex border-b-2">
                  <div class="w-72 flex items-center p-2 border-r-2">
                    <div>{{ record.empName }}</div>
                    <div class="text-gray-400 ml-2 text-xs w-20 truncate">{{ record.ksmc }}</div>
                  </div>
                  <div class="flex-1 p-2 border-r-2">
                    <SchedulingOptions :emp-data="record.day" @success="onSaveData(record)" />
                  </div>
                </div>
              </template>
              <template v-else>
                <div class="text-center mt-10">
                  <a-empty description="暂无数据" />
                </div>
              </template>
            </div>
          </a-spin>
        </div>
        <!-- <div class="flex justify-between mt-4 mb-2">
          <div>&nbsp;</div>
          <div>
            <a-pagination size="small" :page-size="page.pageSize" :current="page.pageNum" :total="total" show-size-changer @change="onChangePage" />
          </div>
        </div> -->
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'
import { getSystemConfig } from '@/utils/systemConfig'

import SelectDoctor from '@/components/SelectDoctor'
import { post } from '@/utils/request'
import SchedulingOptions from '../components/SchedulingOptions'

const formRef = ref(null)
const loading = ref(false)
const formState = ref({ ysbh: '', rq: dayjs().format('YYYY-MM-DD') })
const week = ref(['周日', '周一', '周二', '周三', '周四', '周五', '周六'])
const titleDate = ref(dayjs().format('YYYY-MM-DD') + ' ' + week.value[dayjs().day()])
const total = ref(0)
const doctorData = ref([])
const empList = ref([])
const interfaceData = (weekArrays) => {
  const lisData = {}
  weekArrays.day.forEach(({ period, roomId, schedulingId }) => {
    lisData[`${period}RoomId`] = roomId
    lisData[`${period}SchedulingId`] = schedulingId
  })
  return lisData
}
const receptionData = (data) => {
  doctorData.value = data.map((item) => item.value)
  queryList()
  // if (formState.value.ksdm) queryList()
}
const onSave = () => {
  empList.value.map((item) => {
    onSaveRecord(item)
  })
  message.success('成功')
  queryList()
}
const onSaveRecord = async (record) => {
  const formData = {
    empId: record.empId,
    empName: record.empName,
    ksmc: record.ksmc,
    schedulingDate: formState.value.rq,
    id: record.id,
    ...interfaceData(record)
  }
  const res = await post('/operation/opex/saveSpecialShifts', formData)
  if (res.code !== 0) return message.error(res.msg)
  if (!record.id) queryList()
}
const onSaveData = (record) => {
  const empIndex = empList.value.findIndex((x) => x.empId === record.empId)
  if (empIndex !== -1) {
    empList.value.splice(empIndex, 1, record)
  }
}

const queryList = async () => {
  empList.value = []
  titleDate.value = formState.value.rq + ' ' + week.value[dayjs(formState.value.rq).day()]
  loading.value = true
  const res = await post('/operation/opex/getSpecialShiftsList', {
    ...formState.value,
    ysbh: !formState.value.ysbh ? doctorData.value : [formState.value.ysbh]
    // ...page.value
  })
  loading.value = false

  if (res.code !== 0) return message.error(res.msg)
  total.value = res.total

  empList.value = res.data.map((item) => {
    return {
      empId: item.empId,
      empName: item.empName,
      id: item.id ? item.id : '',
      ksmc: item.ksmc,
      day: [
        { period: 'am', roomId: item.amRoomId ? item.amRoomId : '', schedulingId: item.amSchedulingId ? item.amSchedulingId : '' },
        { period: 'pm', roomId: item.pmRoomId ? item.pmRoomId : '', schedulingId: item.pmSchedulingId ? item.pmSchedulingId : '' },
        { period: 'en', roomId: item.enRoomId ? item.enRoomId : '', schedulingId: item.enSchedulingId ? item.enSchedulingId : '' }
      ]
    }
  })
}

const onChangeEmp = (value) => {
  formState.value.ysbh = value
  queryList()
}
</script>
<style lang="less" scoped>
.scheduling {
  .detail {
    height: calc(100vh - 282px);
    overflow: hidden;
    overflow-y: scroll;
  }
}
</style>
